<template>
  <div class="login">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="60px" class="login-ruleForm">
      <div class="title">智慧停车管理平台</div>
      <el-form-item label="账号" prop="account">
        <el-input type="text" v-model="ruleForm.account" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="ruleForm.code" style="width: 150px"></el-input>
        <img :src="ruleForm.Url" @click="refreshCode" alt="" style="width:100px;display: inline;height: 36px;vertical-align: bottom;"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style scoped lang="stylus">
  .login {
    width 100%
    height 100%
    background-color: #2d3a4b
    .login-ruleForm {
      padding 20px
      width: 360px;
      min-height: 280px;
      top: 50%;
      left: 50%;
      margin-top: -138px;
      margin-left: -180px;
      position: absolute;
      box-shadow: 0 0 2px #fff;
      .title{
        text-align: center;
        padding-bottom: 20px;
        font-size: 22px;
        color: #fff;
      }
    }
  }
</style>
<script>
  import {login,menu,info} from '../assets/js/api'
  export default {
    data() {
      var validateAccount = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入账号'));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      var checkCode = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验证码不能为空'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          account: '',
          password: '',
          code: '',
          Url: '/leon-system/captcha.jpg',
        },
        rules: {
          account: [
            {validator: validateAccount, trigger: 'blur'}
          ],
          password: [
            {validator: validatePass, trigger: 'blur'}
          ],
          code: [
            {validator: checkCode, trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      refreshCode: function () {
        this.ruleForm.Url = "/leon-system/captcha.jpg?ts=" + new Date().getTime();
      },
      submitForm(formName) {
        let self = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            login({
              username: this.ruleForm.account,
              password: this.ruleForm.password,
              captcha: this.ruleForm.code
            }).then(res => {
              console.log(res);
              self.$store.commit('SET_TOKEN', res.token);
             /* self.$store.commit('GET_INFO',res.data);*/
              self.$router.push('/');
            })
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
